<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <style type="text/css" media="screen">
            #map { height: 500px; }
        </style>
        <script src="../../lib/OpenLayers.js" type="text/javascript" charset="utf-8"></script>
        <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            function init(){
                var map = new OpenLayers.Map ("map", {
                    controls: [
                        new OpenLayers.Control.Navigation(),
                        new OpenLayers.Control.Attribution()
                    ],
                    maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                    maxResolution: 156543.0399,
                    numZoomLevels: 19,
                    units: 'm',
                    projection: new OpenLayers.Projection("EPSG:900913"),
                    displayProjection: new OpenLayers.Projection("EPSG:4326")
                });
                
                var osm = new OpenLayers.Layer.OSM.Mapnik('OSM');
                map.addLayer(osm);
                var lonLat = new OpenLayers.LonLat(5, 40).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
                map.setCenter (lonLat, 5);
                
                var featurecollection = {
                    "type": "FeatureCollection", 
                    "features": [{
                        "geometry": {
                            "type": "GeometryCollection", 
                            "geometries": [
                                {
                                    "type": "LineString", 
                                    "coordinates": 
                                        [[11.0878902207, 45.1602390564], 
                                        [15.01953125, 48.1298828125]]
                                },
                                {
                                    "type": "Polygon", 
                                    "coordinates": 
                                        [[[11.0878902207, 45.1602390564], 
                                          [14.931640625, 40.9228515625], 
                                          [0.8251953125, 41.0986328125], 
                                          [7.63671875, 48.96484375], 
                                          [11.0878902207, 45.1602390564]]]
                                },
                                {
                                    "type":"Point", 
                                    "coordinates":[15.87646484375, 44.1748046875]                                    
                                }
                            ]
                        }, 
                        "type": "Feature", 
                        "properties": {}    
                    }]
                };
                var geojson_format = new OpenLayers.Format.GeoJSON({
                    'internalProjection': new OpenLayers.Projection("EPSG:900913"),
                    'externalProjection': new OpenLayers.Projection("EPSG:4326")
                });
                var vector_layer = new OpenLayers.Layer.Vector(); 
                map.addLayer(vector_layer);
                vector_layer.addFeatures(geojson_format.read(featurecollection));
            };
        </script>
    </head>
    <body onload="init()">
        <div id="map"></div>
    </body>
</html>
